<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path:'/goods'}">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片区域-->
        <el-card>
            <el-row>
                <el-button type="primary" @click="clickAddCateDialog" >添加分类</el-button>
            </el-row>

            <!--商品分类 列表区域-->
            <el-row>
                <!--商品列表 区域-->
                <tree-table
                        class="treeTable"
                        :data="cateList"
                        :columns="columns"
                        :selection-type="false"
                        :expand-type="false"
                        index-text="#"
                        :show-row-hover="false"
                        show-index
                        border>
                        <!-- 是否有效 -->
                        <template slot="isOk" slot-scope="scope">
                            <i class="el-icon-success"
                               style="color: lightgreen"
                               v-if="scope.row.cat_deleted === false"
                            ></i>
                        </template>
                        <!-- 排序 -->
                        <template slot="order" slot-scope="scope">
                            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                            <el-tag size="mini" type="warning" v-else>三级</el-tag>
                        </template>
                        <!-- 操作 -->
                        <template slot="opt" slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini"
                                       @click="showEditGoods(scope.row)"></el-button>
                            <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="deleteCate(scope.row.cat_id)"
                            ></el-button>
                        </template>
                </tree-table>
                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pagenum"
                        :page-sizes="[5, 10, 15]"
                        :page-size="queryInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                ></el-pagination>
            </el-row>
        </el-card>
        <!--添加商品分类 对话框-->
        <el-dialog title="添加分类" width="50%" :visible.sync="showAddCateDialog" @close="addCateDialogClose">
            <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <!-- options：数据源 -->
                    <!-- props：指定配置对象 -->
                    <el-cascader
                            v-model="selectedKeys"
                            :options="parentCateList"
                            :props="cascaderProps"
                            @change="handleChange"></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="showAddCateDialog = false">取 消</el-button>
                    <el-button type="primary" @click="addCateData">确 定</el-button>
              </span>
        </el-dialog>
        <!--编辑商品分类 对话框-->
        <el-dialog title="修改分类" width="50%" :visible.sync="showEditCateDialog" @close="editCateDialogClose">
            <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="showEditCateDialog = false">取 消</el-button>
                    <el-button type="primary" @click="editCateData">确 定</el-button>
              </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Category",
        data(){
            return {
                // 添加商品 分类 对话框
                showAddCateDialog:false,
                // 添加商品分类 对象
                addCateForm:{
                    // 将要添加分类名称
                    cat_name: '',
                    // 分类父级id
                    cat_pid: 0,
                    // 分类等级：`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
                    cat_level: 0
                },
                // 添加商品 表单 校验规则
                addCateFormRules:{
                    cat_name:[
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        {
                            min: 2,
                            max: 30,
                            message: '商品名称的长度在2～30个字',
                            trigger: 'blur'
                        }
                    ]
                },
                // 选中的 key
                selectedKeys:[],
                // 字典 数据列表
                parentCateList:[],
                cascaderProps:{
                    //次级菜单的展开方式
                    expandTrigger:'hover',
                    value:'cat_id',
                    label:'cat_name',
                    children:'children'
                },
                // 商品分类列表
                cateList:[],
                // 为table指定列的定义
                columns:[
                    {
                        label: '分类名称',
                        prop: 'cat_name'
                    },
                    {
                        label: '是否有效',
                        // 当前列 自定义模板
                        type: 'template',
                        template: 'isOk'
                    },
                    {
                        label: '排序',
                        // 当前列 自定义模板
                        type: 'template',
                        template: 'order'
                    },
                    {
                        label: '操作',
                        // 当前列 自定义模板
                        type: 'template',
                        template: 'opt'
                    }
                ],
                total:0,
                // 查询条件
                queryInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                showEditCateDialog:false,
                editCateForm:{
                    cat_name:''
                },
                // 编辑  表单 校验
                editCateFormRules:{
                    cat_name:[
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        {
                            min: 2,
                            max: 30,
                            message: '商品名称的长度在2～30个字',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created() {
            this.getCateList()
        },
        methods:{
            // 获取商品 分类 列表
            async getCateList(){
                await this.$http.get('categories', {
                    params: this.queryInfo
                }).then(res=>{
                    if (res.data.meta.status !== 200){
                        this.$message.error('获取商品列表失败!')
                    }
                    // 给数据列表赋值
                    this.cateList = res.data.data.result
                    // 总数据条数
                    this.total = res.data.data.total
                })
            },
            // 监听 pagesize 变动
            handleSizeChange(newSize){
                this.queryInfo.pagesize = newSize
                this.getCateList()
            },
            //监听 pageno 变动
            handleCurrentChange(newPage){
                this.queryInfo.pagenum = newPage
                this.getCateList()
            },
            addCateData(){
                //console.log('添加商品分类');
                this.$refs.addCateFormRef.validate(async valid =>{
                    if (!valid) return
                    this.$http.post('categories',this.addCateForm).then(res=>{
                        if (res.data.meta.status !== 201){
                            this.$message.error('添加分类失败!')
                        }
                        this.$message.success('添加分类成功！')
                        this.showAddCateDialog = false
                    })
                })
            },
            // 监听 添加商品分类对话框 关闭事件  重置 表单
            addCateDialogClose(){
                this.$refs.addCateFormRef.resetFields()
                this.selectedKeys = []
                this.addCateForm.cat_level = 0
                this.addCateForm.cat_pid = 0
            },
            // 添加分类 选择项发生变化触发
            handleChange(){
                if (this.selectedKeys.length > 0){
                    // 父级分类的Id
                    this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
                    // 当前 分类的的等级
                    this.addCateForm.cat_level = this.selectedKeys.length
                }else {
                    // 父级分类的id
                    this.addCateForm.cat_pid = 0
                    this.addCateForm.cat_level = 0
                }
            },
            // 获取父级分类的数据
            async getParentCateList(){
                await this.$http.get('categories', {
                    params: { type: 2 }
                }).then(res=>{
                    if (res.data.meta.status !== 200){
                        return this.$message.error('获取父级分类失败！')
                    }
                    this.parentCateList = res.data.data
                }).catch(err=>{
                    console.log(err);
                })
            },
            clickAddCateDialog(){
                this.showAddCateDialog = true
                this.getParentCateList()
            },
            editCateDialogClose(){
                //this.$refs.editCateFormRef.resetFields()
            },
            // 弹框
            showEditGoods(row){
                this.editCateForm = row
                this.showEditCateDialog =true
            },
            //编辑操作
            editCateData(){
                this.$refs.editCateFormRef.validate(valid=>{
                    if (!valid) return
                    this.$http.put('categories/' + this.editCateForm.cat_id,
                        {
                            cat_name: this.editCateForm.cat_name
                        }).then(res=>{
                            if (res.data.meta.status !== 200) return this.$message.error('更新分类名失败！')
                            this.$message.success('更新分类名成功！')
                            this.getCateList()
                            this.showEditCateDialog = false
                    })
                })
            },
            //删除分类
            async deleteCate(id){
                await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res=>{
                     this.$http.delete('categories/' + id).then(res=>{
                        if (res.data.meta.status !== 200) { return this.$message.error('删除商品分类失败！') }
                        this.$message.success('删除商品分类成功！')
                        this.getCateList()
                    })

                }).catch(err=>{
                    return this.$message.info('已取消删除！')
                })
            }
        }
    }
</script>

<style type="less" scoped>
    .treeTable{
      margin-top: 20px;
    }

</style>